<template>
  <el-popover
    placement="top-start"
    :width="420"
    trigger="click"
    popper-class="emoji-popover"
  >
    <template #reference>
        <slot>
            <button class="tool-btn emoji-btn" title="表情包">
                <i class="emoji-icon">😊</i>
            </button>
        </slot>
    </template>
    <div class="emoji-panel">

      <div class="emoji-grid">
        <button
          v-for="emoji in currentEmojis"
          :key="emoji"
          class="emoji-item"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </button>
      </div>
      <div class="emoji-categories">
        <button 
          v-for="category in emojiCategories" 
          :key="category.name"
          :class="['category-btn', { active: activeCategory === category.name }]"
          @click="activeCategory = category.name"
          :title="category.title"
        >
          {{ category.icon }}
        </button>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 定义事件
const emit = defineEmits<{
  selectEmoji: [icon: string]
}>()

// 响应式数据
const activeCategory = ref('smileys')

// 表情包分类数据
const emojiCategories = [
  { name: 'smileys', title: '笑脸', icon: '😊' },
  { name: 'gestures', title: '手势', icon: '👍' },
  { name: 'hearts', title: '爱心', icon: '❤️' },
  { name: 'animals', title: '动物', icon: '🐱' },
  { name: 'food', title: '食物', icon: '🍎' },
  { name: 'activities', title: '活动', icon: '⚽' }
]

// 表情包数据
const emojis = {
  smileys: [
    '😀', '😃', '😄', '😁', '😆', '😂', '🤣', '😊', 
    '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', 
    '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪',
    '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒',
    '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖',
    '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡',
    '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰',
    '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶',
    '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮',
    '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴',
    '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠'
  ],
  gestures: [
    '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏',
    '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆',
    '👇', '☝️', '👍', '👎', '👊', '✊', '🤛', '🤜',
    '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✍️', '💅',
    '🤳', '💪', '🦾', '🦿', '🦵', '🦶', '👂', '🦻',
    '👃', '🧠', '🫀', '🫁', '🦷', '🦴', '👀', '👁️',
    '👅', '👄', '💋'
  ],
  hearts: [
    '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
    '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖',
    '💘', '💝', '💟', '♥️', '💌', '💒', '💍', '💎',
    '🌹', '🌺', '🌻', '🌷', '🌸', '💐', '🎀', '🎁',
    '💋', '😍', '🥰', '😘', '💏', '💑', '👨‍❤️‍👨', '👩‍❤️‍👩',
    '👨‍❤️‍👩', '💃', '🕺', '👫', '👬', '👭', '🤵', '👰',
    '🤱', '👶', '🍼', '🧸', '🎈', '🎊', '🎉', '🥳'
  ],
  animals: [
    '🐱', '🐶', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼',
    '🐻‍❄️', '🐨', '🐯', '🦁', '🐮', '🐷', '🐽', '🐸',
    '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦',
    '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺',
    '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞',
    '🐜', '🦟', '🦗', '🕷️', '🦂', '🐢', '🐍', '🦎',
    '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡',
    '🐠', '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅',
    '🐆', '🦓', '🦍', '🦧', '🐘', '🦛', '🦏', '🐪',
    '🐫', '🦒', '🦘', '🐃', '🐂', '🐄', '🐎', '🐖',
    '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩', '🦮',
    '🐕‍🦺', '🐈', '🐈‍⬛', '🐓', '🦃', '🦚', '🦜', '🦢',
    '🦩', '🕊️', '🐇', '🦝', '🦨', '🦡', '🦦', '🦥',
    '🐁', '🐀', '🐿️', '🦔'
  ],
  food: [
    '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓',
    '🫐', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝',
    '🍅', '🍆', '🥑', '🥦', '🥬', '🥒', '🌶️', '🫑',
    '🌽', '🥕', '🫒', '🧄', '🧅', '🥔', '🍠', '🥐',
    '🥖', '🍞', '🥨', '🥯', '🧀', '🥚', '🍳', '🧈',
    '🥞', '🧇', '🥓', '🥩', '🍗', '🍖', '🦴', '🌭',
    '🍔', '🍟', '🍕', '🥪', '🥙', '🧆', '🌮', '🌯',
    '🫔', '🥗', '🥘', '🫕', '🥫', '🍝', '🍜', '🍲',
    '🍛', '🍣', '🍱', '🥟', '🦪', '🍤', '🍙', '🍚',
    '🍘', '🍥', '🥠', '🥮', '🍢', '🍡', '🍧', '🍨',
    '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬',
    '🍫', '🍿', '🍩', '🍪', '🌰', '🥜', '🍯', '🥛',
    '🍼', '☕', '🍵', '🧃', '🥤', '🍶', '🍺', '🍻',
    '🥂', '🍷', '🥃', '🍸', '🍹', '🧉', '🍾'
  ],
  activities: [
    '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉',
    '🥏', '🎱', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏',
    '🥅', '⛳', '🏹', '🎣', '🥊', '🥋', '🎽', '🛹',
    '🛷', '⛸️', '🥌', '🎿', '⛷️', '🏂', '🏋️', '🤼',
    '🤸', '⛹️', '🤺', '🤾', '🏌️', '🏇', '🧘', '🏄',
    '🏊', '🤽', '🚣', '🧗', '🚵', '🚴', '🏆', '🥇',
    '🥈', '🥉', '🏅', '🎖️', '🎪', '🤹', '🎭', '🎨',
    '🎬', '🎤', '🎧', '🎼', '🎵', '🎶', '🥁', '🎹',
    '🎺', '🎷', '🎸', '🎻', '🎲', '🃏', '🎴', '🎯',
    '🎳', '🎮', '🕹️', '🎰', '🧩', '🎉', '🎊', '🎈',
    '🎀', '🎁', '🏮', '🎄', '🎃', '🎆', '🎇', '✨'
  ]
}

// 计算属性
const currentEmojis = computed(() => {
  return emojis[activeCategory.value] || []
})

// 方法
const selectEmoji = (icon: string) => {
  emit('selectEmoji', icon)
}
</script>

<style scoped lang="scss">
.tool-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tool-btn:hover {
  background: #f5f7fa;
}

.emoji-icon {
  font-style: normal;
  font-size: 16px;
}

.emoji-panel {
  padding: 12px;
}

.emoji-categories {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #e4e7ed;
}

.category-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.category-btn:hover {
  background: #f5f7fa;
}

.category-btn.active {
  background: #409eff;
  color: white;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-item:hover {
  background: #f5f7fa;
  transform: scale(1.1);
}

/* 滚动条样式 */
.emoji-grid::-webkit-scrollbar {
  width: 4px;
}

.emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-grid::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 2px;
}
</style>

<style lang="scss">
.emoji-popover {
  padding: 0 !important;
}
</style>
